 <!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .layout {
            width: 960px;
            margin: 0 auto;
            background-color: #f0f0f0;
        }
        .layout::after {
            content: "";
            display: block;
            clear: both;
        }
        .layout ul li {
            width: 110px;
            height: 40px;
            border: 1px solid #ccc; 
            box-sizing: border-box;
            margin: 5px 5px;
            text-align: center;
            line-height: 40px;
            float: left;
            background-color: #fff;
        }
        .layout ul li.active {
            background-color: deepskyblue;
            color: #fff;
        }

        /* active  current   */
    </style>
</head>
<body>

    <!-- <div class="layout">
        <ul>
            <li >xxx</li>
        </ul>
    </div> -->


    <script src="./data.js"></script>
    <script>
        // 要求：
            // 1. 渲染 data.js文件的名单数组，
            //    并通过随机索引值设置一个 "名字" 高亮（即蓝色背景，白色字体）
            // 2. 每个刷新页面可以设置随机 "名字" 高亮 

            // console.log(student_array);
            // 记录数组的长度
            var len = student_array.length;
            // 编写函数 (随机整数)
            var random = function(){
                // 写下你的代码1
                return Math.floor(Math.random() * len);
            }

            // 随机数
            var num = random();
            // 编写函数  渲染页面的
            var template = function(){
                // 写下你的代码2
                var str = '';
                    str +='<div class="layout">'
                    str +='    <ul>'
                    for(var i = 0 ; i < len ; i ++ ){
                        // 判断是否设置名字的高亮
                        if(num == i ){
                            str +='        <li class="active">'+student_array[i]+'</li>'
                        }else {
                            str +='        <li>'+student_array[i]+'</li>'
                        }
                    }
                    str +='    </ul>'
                    str +='</div> '

                // 渲染字符串
                document.write(str);
            }

            // 调用函数
            template();


    </script>
</body>
</html>